<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>用户中心copy</title>
    <!-- <meta name="description" content=""> -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/userCenter.css">
    <style>
        .imgMess.imgEmall:hover {
            outline: 8px ridge rgba(133, 238, 212, 0.746);
            border-radius: rem;
        }
    </style>
</head>

<body>
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <!--导航栏-->
    <div class="navbar">
        <div class="barlogo">
            <img src="images/firstpage_logo.png" />
        </div>
        <div class="barlist">
            <div class="barleft  hoverbar"><span>问卷列表</span></div>
            <div class="barleft hoverbar"><span>模板列表</span></div>
            <div class="barleft hoverbar firstbar"><span>用户中心</span></div>
        </div>
        <div class="hoverbar" id="exit"><span>安全退出</span></div>
    </div>

    <!--主题内容-->
    <div class="content">
        <!-- carte 功能菜单：个人信息 成员管理 权限管理 班级管理 -->
        <div class="carte">
            <table border="0" cellspacing="71">
                <tr>
                    <td class="td1 td-Color1">个人信息</td>
                    <td class="td2">成员管理</td>
                    <td class="td3">权限管理</td>
                    <td class="td4">班级管理</td>
                </tr>
            </table>
        </div>
        <!--个人信息 表单 form -->
        <div class="form ">
            <form action="" class="mysel">
                <input type="text" class="user" name="user" placeholder="用户名"><br>
                <input type="password" class="pd" name="pd" id="" placeholder="密码"><br>
                <input type="password" class="pwd" name="pwd" id="" placeholder="再次确认密码"><br>
                <input type="image" class="imgMess" src="images/user_btn_message.png" name="mess"
                    style="margin-right: 100px;">
                <input type="image" class="imgEmall" src="images/user_btn_email.png" name="email"><br>
            </form>
        </div>

        <!-- 成员管理 auth -->
        <div class="auth dis">
            <form action="#" method="post" class="content_body_from">
                <div><img src="./images/firstpage_icon_search.png" style="position: absolute; left: 15px; top:11px">
                </div>
                <input type="search" id="search" />
                <input type="button" id="button" value="搜   索">
                <input class="butAu" type="button" id="button" name="tj1" value="添   加">
                <input type="button" id="button" name="qr" value="确   认">
            </form>
            <!-- -------可加表格--------- -->
            <div id="trtdBer">
                <table border="0">
                    <tr>
                        <td>&nbspID&nbsp</td>
                        <td>登录名</td>
                        <td>角色名</td>
                        <td>手机号</td>
                        <td>邮箱</td>
                        <td>操作</td>
                    </tr>
                    <tr class="cn">
                        <td colspan="6">
                            <h3>成员管理</h3>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="footer">
                <ul>
                    <li id="li1"><a href="#">第一页</a></li>
                    <li id="li2"><a href="#">上一页</a></li>
                    <li><a href="#">1</a></li>
                    <li id="li17">...</li>
                    <li><a href="#">下一页</a></li>
                    <li><a href="#">最后一页</a></li>
                    <li id="li12">跳到</li>
                    <li><input type="text" placeholder="2"></li>
                    <li id="li14"><a href="#">页</a></li>
                    <li><a href="#">跳转</a></li>
                </ul>
            </div>
        </div>
        <!-- 权限管理 member -->
        <div class="mber dis">
            <form action="#" method="post" class="content_body_from">
                <div><img src="./images/firstpage_icon_search.png" style="position: absolute; left: 15px; top:11px">
                </div>
                <input type="search" id="search" />
                <input type="button" id="button" value="搜   索">
                <input type="button" id="button" name="tj2" value="添   加">
                <input type="button" id="button" name="qr" value="确   认">
            </form>
            <!-- -------可加表格--------- -->
            <div id="trtd">
                <table border="0">
                    <tr>
                        <td>&nbspID&nbsp</td>
                        <td>用户名字</td>
                        <td>具体描述</td>
                        <td>用户操作</td>
                    </tr>
                    <tr class="bn">
                        <td colspan="5">
                            <h3>权限管理</h3>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <!-- 班级管理 class -->
        <div class="clas dis">
            <form action="#" method="post" class="content_body_from">
                <div><img src="./images/firstpage_icon_search.png" style="position: absolute; left: 15px; top:11px">
                </div>
                <input type="search" id="search" />
                <input type="button" id="button" value="搜   索">
                <input type="button" id="button" name="tj" value="添   加">
                <input type="button" id="button" name="qr" value="确   认">
            </form>
            <!-- -------可加表格--------- -->
            <div id="trtd">
                <table border="0">
                    <tr>
                        <td>班级名字</td>
                        <td>&nbspID&nbsp</td>
                        <td>班级人数</td>
                        <!-- <td>商品总价</td> -->
                        <td>用户操作</td>
                    </tr>
                    <tr class="an">
                        <td colspan="5">
                            <h3>班级管理</h3>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="footer">
                <ul>
                    <li id="li1"><a href="#">第一页</a></li>
                    <li id="li2"><a href="#">上一页</a></li>
                    <li><a href="#">1</a></li>
                    <li id="li17">...</li>
                    <li><a href="#">下一页</a></li>
                    <li><a href="#">最后一页</a></li>
                    <li id="li12">跳到</li>
                    <li><input type="text" placeholder="2"></li>
                    <li id="li14"><a href="#">页</a></li>
                    <li><a href="#">跳转</a></li>
                </ul>
            </div>
        </div>

    </div>


    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.6.0.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.min.js"></script>
    <script src="./layer/layer.js"></script>
    <script>
        $(function () {
            $(".td1").mouseenter(function () {
                $(this).addClass("td-Color1");
                $(this).removeClass("td-Color2");
                $(".form").show(); $(".auth").hide(); $(".mber").hide(); $(".clas").hide();

            })
            $(".td1").mouseleave(function () {
                $(this).addClass("td-Color2");
                $(this).removeClass("td-Color1");
            })

            $(".td2").mouseenter(function () {
                $(this).addClass("td-Color1");
                $(this).removeClass("td-Color2");
                $(".auth").show(); $(".form").hide(); $(".mber").hide(); $(".clas").hide();
            })
            $(".td2").mouseleave(function () {
                $(this).addClass("td-Color2");
                $(this).removeClass("td-Color1");
            })

            $(".td3").mouseenter(function () {
                $(this).addClass("td-Color1");
                $(this).removeClass("td-Color2");
                $(".mber").show(); $(".form").hide(); $(".auth").hide(); $(".clas").hide();

            })
            $(".td3").mouseleave(function () {
                $(this).addClass("td-Color2");
                $(this).removeClass("td-Color1");
            })

            $(".td4").mouseenter(function () {
                $(this).addClass("td-Color1");
                $(this).removeClass("td-Color2");
                $(".clas").show(); $(".form").hide(); $(".auth").hide(); $(".mber").hide();

            })
            $(".td4").mouseleave(function () {
                $(this).addClass("td-Color2");
                $(this).removeClass("td-Color1");
            })
        })
        /* --------- */
        $(function (e) {
            var a = 0;
            $("input[name='tj1']").click(function () {
                var html = "<tr class='tr' name='tr" + a + "'> <td><input type='nubmer' name='pirce" + a + "'></td> <td><input type='nubmer' name='pirce" + a + "'></td> <td><input type='text' name='name" + a + "'></td> <td><input type='text' name='name" + a + "'></td>  <td><input type='text' name='name" + a + "'></td>  <td><input type='button' name='sc' value='删除'><input type='button' name='bj' value='编辑'></td></tr>";
                $("tr[class='cn']").before(html);
                a++;
            })
            $("input[name='tj2']").click(function () {
                var html = "<tr class='tr' name='tr" + a + "'> <td><input type='nubmer' name='pirce" + a + "'></td> <td><input type='text' name='name" + a + "'></td> <td><input type='text' name='name" + a + "'></td>  <td><input type='button' name='sc' value='删除'><input type='button' name='bj' value='编辑'></td></tr>";
                $("tr[class='bn']").before(html);
                a++;
            })
            $("input[name='tj']").click(function () {

                var html = "<tr class='tr' name='tr" + a + "'><td><input type='text' name='name" + a + "'> </td><td><input type='nubmer' name='pirce" + a + "'></td> <td><input type='nubmer' name='num" + a + "'></td>  <td><input type='button' name='sc' value='删除'><input type='button' name='bj' value='编辑'></td></tr>";
                $("tr[class='an']").before(html);
                a++;
            })
            var b = 0;
            $("input[name='qr']").click(function () {
                $(".tr").each(function (i) {
                    var bindex = $(".tr:eq(" + i + ")").attr("name");
                    var index = (bindex.split("tr"));

                    var name = $("input[name='name" + index[1] + "']").val();
                    var price = $("input[name='pirce" + index[1] + "']").val();
                    var num = $("input[name='num" + index[1] + "']").val();

                    price = parseInt(price);
                    num = parseInt(num);
                    var su = price * num;
                    if (price != NaN || num != NaN) {
                        if (!isNaN(price) && !isNaN(num)) {
                            var xg = "<td><input type='hidden' name='name" + index[1] + "' value='" + name + "'><sapn>" + name + "</span></td> <td><input type='hidden' name='pirce" + index[1] + "' value='" + price + "'/><sapn>" + price + "</span></td> <td><input type='hidden' name='num" + index[1] + "' value='" + num + "'/><sapn>" + num + "</span></td> <td><sapn>" + su + "</span></td>  <td><input type='button' name='sc' value='删除'><input type='button' name='bj' value='编辑'></td>";
                            $(".tr:eq(" + i + ")").html(xg);
                        } else {
                            alert("请输入正确的数据")
                        }
                    }
                })
                $("input[name='sc']").click(function (e) {
                    $(this).parent().parent().remove();
                });
                $("input[name='bj']").click(function (e) {
                    var a = $(this).parent().parent().index() - 1;
                    var bindex = $(".tr:eq(" + a + ")").attr("name");
                    var index = (bindex.split("tr"));
                    // alert(index[1])
                    var name = $("input[name='name" + index[1] + "']").val();
                    var price = $("input[name='pirce" + index[1] + "']").val();
                    var num = $("input[name='num" + index[1] + "']").val();
                    var bj = "<td><input type='text' name='name" + index[1] + "'' value='" + name + "'> </td><td><input type='nubmer' name='pirce" + index[1] + "' value='" + price + "'></td> <td><input type='nubmer' name='num" + index[1] + "' value='" + num + "'></td> <td><input type='text' readonly name='sum" + index[1] + "'></td>   <td><input type='button' name='sc' value='删除'><input type='button' name='bj' value='编辑'></td>"
                    $(".tr:eq(" + a + ")").html(bj);
                })
            })
        })
        /* ------------- */
        $(function () {
            $(".butAu").click(function () {
                // alert(1);
                var btn1;
                var btn2;
                var index = layer.open({
                    offset: ['230px', '686px'],
                    shade: [0.5, '#ffffff'],
                    type: 1,
                    title: false,
                    closeBtn: 0,
                    shadeClose: true,
                    skin: 'yourclass',
                    content: "<form action='#'><label>问卷类型</label><span>综合满意度</span><span>教学满意度</span><br/><label>问卷名称</label><input type='text' placeholder='请输入问卷名称' ><br/><label>截止时间</label><input type='datetime-local' value=''><br/><label>选择班级</label><input type='checkbox' value='java'/>java<br/><label>选择模板</label><select ><option value=''>请选择</option><lect><a href='#' >更多模板</a></form>"
                    , btn: ['下载图片', '转发分享']
                    , yes: function (index) {
                        layer.msg('下载成功', { icon: 1 });
                        layer.close(index);
                    }
                    , btn2: function () {
                        layer.msg('分享成功', { icon: 1 });
                    }
                });
                layer.style(index, {
                    padding: '82px 79px 65px 79px ',
                    background: '#fff',
                })
            })
        })
    </script>
</body>

</html>